<script lang="ts" setup>
import { About, Benifit, CommissionPlan, Faq, Features, Footer, Header, Intro, Testimonials } from './Comps';
import Registration, { toAgentSignIn } from './Comps/Registration.vue';

const registrationDomRef = ref();

function toRegistration() {
  // const top = registrationDomRef.value?.$el?.offsetTop ?? 0;
  // top > 0 && containerDomRef.value?.scrollTo({ top, behavior: 'instant' as ScrollBehavior });
  registrationDomRef.value?.focus?.();
}

function scrollTo(id: string) {
  const element = document.getElementById(id);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
}
</script>

<template>
  <div>
    <Header @signIn="toAgentSignIn" @signUp="toRegistration" @scrollTo="scrollTo" />
    <Intro @signIn="toAgentSignIn" @signUp="toRegistration" />
    <Benifit />
    <About id="about" />
    <Features />
    <CommissionPlan id="commissions" @signUp="toRegistration" />
    <Testimonials id="testimonials" />
    <Faq id="faq" />
    <Registration ref="registrationDomRef" />
    <Footer />
  </div>
</template>

<style lang="scss" scoped>
:deep(.container) {
  --uno: 'm-[0_auto] max-w-270 relative w-full px-6 lt-tabletl:(px-4)';
}
</style>
